.modal.fade
  .modal-dialog.glyph-dialog__dialog
    .modal-content
      .modal-header.glyph-dialog__header
        h4.modal-title= self.t('title')
        button.btn-close(type='button', data-bs-dismiss='modal')
      .modal-body
        form.form-horizontal

          .row.mb-3
            .col-sm-12
              - var font_class = (self.fontname === 'custom_icons') ? "font-custom_icons" : "font-fontello"
              span.glyph-dialog__char-xl(class=font_class)= self.char_ref
              span.glyph-dialog__char-md(class=font_class)= self.char_ref
              span.glyph-dialog__char-sm(class=font_class)= self.char_ref


          fieldset.glyph-dialog__fieldset
            legend= self.t('fieldset_defaults')
            .row.mb-3
              label.col-sm-4.col-form-label(for='gopt__css_name')= self.t('css_name')
              .col-sm-4
                input#gopt__css_name.form-control(type='text', value=self.css_name)
            .row.mb-3
              label.col-sm-4.col-form-label(for='gopt__hex_code')= self.t('hex_code')
              .col-sm-4
                .input-group
                  span.input-group-text 0x
                  input#gopt__code.form-control(type='text', value=self.hex_code)

          fieldset.glyph-dialog__fieldset
            legend= self.t('fieldset_search')
            .row.mb-3
              label.col-sm-4.col-form-label(for='gopt__keywords')= self.t('keywords')
              .col-sm-8
                input#gopt__keywords.form-control(type='text', value=self.keywords)


          .row.glyph-dialog__buttons
            .col-sm-12.clearfix
              button.btn.btn-primary.float-end(
                type='submit',
                data-on-click='cmd:glyph_options.save')= self.t('btn_save')
              button.btn.btn-outline-secondary.float-start(
                type='button',
                data-on-click='cmd:glyph_remove')= self.t('btn_delete')
